<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer>
    const input = {
      tag: "DIV",
      attrs: {
        id: "app",
      },
      children: [
        {
          tag: "SPAN",
          children: [{ tag: "A", children: ["test1"] }],
        },
        {
          tag: "SPAN",
          children: [
            { tag: "A", children: ["test2"] },
            { tag: "A", children: ["test3"] },
          ],
        },
      ],
    };

    function render(input) {
      if (typeof input === "string") {
        return document.createTextNode(input);
      }
      if (typeof input === "object") {
        const node = document.createElement(input.tag);
        for (let key in input.attrs) {
          node.setAttribute(key, input.attrs[key]);
        }
        for (let child of input.children) {
          node.appendChild(render(child));
        }
        return node;
      }
      return null;
    }
    console.log(render(input));
  </script>
</head>

<body>

</body>

</html>